import React from 'react';
import It from '../css/Item.module.css';
import { Icon } from 'antd';
import { Row, Col } from 'antd';
import { Carousel } from 'antd';
import { BrowserRouter as Router, BrowserRouter, Route, NavLink, Redirect } from 'react-router-dom'
import Homepage from './Homepage'
import axios from 'axios'
export default class Home extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            username: '',
            item: {
                img: '',
                price: '',
                quantity: '',
                name: "",


            }

        }
    }
    register() {
        this.props.history.push('/register')
    }
    login() {
        this.props.history.push('/login')
    }
    vip(){
        this.props.history.push('/vipcen')
    }
    out(){
        this.props.history.push('/login')
        localStorage.removeItem('token')
    }

    componentDidMount() {

        let _this = this
        let id = this.props.match.params.pid
        console.log(this.props.match.params.pid)
        axios({
            method: 'get',
            url: 'http://api.cat-shop.penkuoer.com/api/v1/products/' + id,


        }).then(function (data) {
            console.log(data.data)
            _this.setState({
                item: {
                    img: data.data.coverImg,
                    name: data.data.name,
                    price: data.data.price,
                    quantity: data.data.quantity

                }

            })
        })

        console.log(this.refs.top2,this.refs.top3)
        let token = localStorage.getItem('token')
        if (token) {
            this.refs.top2.style.display = "none"
            this.refs.top3.style.display = "block"


        } else {
            this.refs.top2.style.display = "block"
            this.refs.top3.style.display = "none"
        }


        axios({
            method: 'get',
            url: 'http://api.cat-shop.penkuoer.com/api/v1/users/info',
            headers: { 'Accept': 'application/json', 'Authorization': 'Bearer ' + token }

        }).then(function (data) {
            _this.setState({
                username: data.data.userName
            })
        })





    }

    render() {
        console.log(this.state)
        return (
            // <BrowserRouter forceRefresh={true}>

            <div className={It.box}>

                <div>
                    {/* top */}
                    <div className={It.top} ref="top2">
                        <div className={It.topcenter}>
                            <Row>
                                <Col span={8}><p>您好，欢迎来到  玩具乐器!</p></Col>
                                <Col span={8} offset={8} className={It.topright}>
                                    <NavLink to="/login" ><Icon type="lock" />登录</NavLink>
                                    <b>|</b>
                                    <NavLink to="/register"><Icon type="user-add" />注册</NavLink>
                                </Col>
                            </Row>
                        </div>
                    </div>
                    {/* top1 */}
                    <div className={It.top1} ref="top3">
                            <div className={It.topcenter1}>
                                <Row>
                                    <Col span={8}><p>{this.state.username}:您好，欢迎来到  玩具乐器!</p></Col>
                                    <Col span={8} offset={8} className={It.topright1}>
                                        <NavLink to="/vipcen" onClick={this.vip.bind(this)}><Icon type="user" />会员中心</NavLink>
                                        <b>|</b>
                                        <NavLink to="/login" onClick={this.out.bind(this)} > <Icon type="poweroff" />退出</NavLink>
                                    </Col>
                                </Row>
                            </div>
                        </div>
                    {/* head */}
                    <div className={It.head}>
                        <div className={It.headcenter}>
                            <Row>
                                <Col span={8}><a href="javascript:;"><img src="http://image.fast.126net.cn/group2/M00/01/35/wKgBTFt1O66AHsxxAABSTbPxnPI447.png" /></a></Col>
                                <Col span={8} offset={8} className={It.headright}>
                                    <NavLink to="/cart"><span><Icon type="shopping-cart" className={It.icon1} /><b>我的购物车</b><Icon type="down" className={It.icon2} /></span></NavLink>
                                </Col>
                            </Row>
                        </div>
                    </div>
                    {/* nav */}
                    <div className={It.nav}>
                        <div className={It.navcenter}>
                            <NavLink to="/homepage">首页</NavLink>
                            <NavLink to="">产品中心</NavLink>
                            <NavLink to="">男孩专区</NavLink>
                            <NavLink to="">女孩专区</NavLink>
                            <NavLink to="">智能专区</NavLink>
                            <NavLink to="">乐器专区</NavLink>
                        </div>
                    </div>
                </div>
                <Route path="item" ></Route>

                <div className={It.show}>
                    <div className={It.left}>
                        <div>
                            <img src={this.state.item.img} className={It.imgs} ></img>
                        </div>
                        <div ref="smshow" onClick={this.smshow.bind(this)} className="smshow">

                            <p className={It.smimgs}>
                                <img src="http://image.fast.126net.cn/group1/M00/04/7A/wKgADFvWoj-ADNAFAABZd2_ThF8331.jpg" className={It.iimm} />
                            </p>
                            <p className={It.smimgs}>
                                <img src="http://image.fast.126net.cn/group1/M00/01/11/wKgBS1rQW6uAGEjtAAIjTKKBUBg960.jpg" className={It.iimm} />
                            </p>
                            <p className={It.smimgs}>
                                <img src="http://image.fast.126net.cn/group1/M00/01/15/wKgBS1rQZdOAY9ClAAHfaI1Kdwg061.jpg" className={It.iimm} />
                            </p>
                            <p className={It.smimgs}>
                                <img src="http://image.fast.126net.cn/group1/M00/01/10/wKgBS1rQWpeAASzSAAGcJF7Dehw261.jpg" className={It.iimm} />
                            </p>
                            <p className={It.smimgs}>
                                <img src="http://image.fast.126net.cn/group1/M00/01/10/wKgBS1rQWp6AC4Q8AAHLjovcWec385.jpg" className={It.iimm} />
                            </p>

                        </div>
                    </div>
                    <div className={It.right}>
                        <h2>{this.state.item.name}</h2>
                        <p>库存：<span>99</span></p>
                        <p>销量：<span>{this.state.item.quantity}</span></p>
                        <p>规格：<b className={It.mou}>默认</b></p>
                        <p><b className={It.wenz}>数量：</b><span className={It.kong} onClick={this.jian.bind(this)}>-</span><input type="text" value="1" className={It.shul} ref='ipts' /><span className={It.kong1} onClick={this.add.bind(this)}>+</span></p>
                        <p>价格：<b className={It.jiage}>{this.state.item.price}</b><span className={It.jiage1}>￥48</span></p>
                        <p>说明：<span>{this.state.dase}</span></p>
                        <p className={It.anniu}><span><button className={It.jiaru} onClick={this.shopping.bind(this)}>加入购物车</button></span><span><button className={It.goum}>立即购买</button></span>  </p>
                    </div>

                </div>

                <p className={It.shouc}><span>收藏</span>|<span>我的收藏</span></p>
                <div className={It.xiang}>
                    <p className={It.lianj} onClick={this.xuanz.bind(this)} ref="baob"><span onClick={this.tup1.bind(this)}>宝贝详情</span><span onClick={this.tup2.bind(this)}>产品评论</span></p>
                    <div ref="tup1">
                        <Row className={It.col} >
                            <Col span={8} >编号：<span>10711490238</span></Col>
                            <Col span={8} >材质：<span>其他</span></Col>
                            <Col span={8} >品牌：<span>芙蓉天使</span></Col>
                        </Row>
                        <Row className={It.col}>
                            <Col span={8} >颜色：<span>彩色</span></Col>
                            <Col span={8} >类型：<span>其他</span></Col>
                        </Row>

                        <img src="http://image.fast.126net.cn/group1/M00/02/BD/wKgBS1siVLSAJl10AAOCO1Iv3Ck511.jpg" />
                        <img src="http://image.fast.126net.cn/group2/M00/00/8B/wKgBTFsiVQWABSG5AAW4uPAzB1s825.jpg" />
                        <img src="http://image.fast.126net.cn/group1/M00/02/BD/wKgBS1siVLSAfe60AAKnS6S5ViE387.jpg" />
                        <img src="http://image.fast.126net.cn/group2/M00/00/8B/wKgBTFsiVQaATbdFAAOvTXmCeCw397.jpg" />

                        <img src="http://image.fast.126net.cn/group1/M00/02/BD/wKgBS1siVLSAFkLRAAKJeBpjTh0383.jpg" />
                        <img src="http://image.fast.126net.cn/group2/M00/00/8B/wKgBTFsiVQaAM-I8AALpXahYXTA419.jpg" />
                        <img src="http://image.fast.126net.cn/group1/M00/02/BD/wKgBS1siVLWAWof8AAU8yYOp9Pw293.jpg" />
                    </div>
                    <div ref="pingj" className={It.pingj}>
                        <h2>暂时没人评价哦！！</h2>

                    </div>
                    <div className={It.footed}>
                        <p>Copyright © 2018 琴峰玩具乐器商行. All Rights Reserved</p>
                        <p>本站内容、图片、视频为网站模板演示数据，如有涉及侵犯版权，请联系我们提供书面反馈，我们核实后会立即删除。</p>
                    </div>
                </div>
            </div>
            // </BrowserRouter>
        )
    }
    smshow(e) {

        var img = this.state.item.coverImg
        let smimgs = document.querySelectorAll('.smshow img')
        console.log(smimgs)
        for (let i = 0; i < smimgs.length; i++) {

            if (e.target == smimgs[i]) {
                e.target.style.border = "2px red solid"
                console.log(e.target.src)

                this.setState({
                    item: {
                        img: e.target.src,
                        name: this.state.item.name,
                        price: this.state.item.price,
                        quantity: this.state.item.quantity
                    }


                })

            }

            else {
                smimgs[i].style.border = "1px black solid"
            }

        }
    }
    jian() {
        if (this.refs.ipts.value == 1) {
            return 1
        }
        this.refs.ipts.value = parseInt(this.refs.ipts.value) - 1

    }
    add() {
        this.refs.ipts.value = parseInt(this.refs.ipts.value) + 1

    }



    xuanz(e) {

        console.log(e.target)
        let baob = this.refs.baob.children
        for (let i = 0; i < baob.length; i++) {

            if (baob[i] == e.target) {
                e.target.style.background = "#cc0c0f"
                e.target.style.color = "#fff"

            }
            else {
                baob[i].style.background = "#f5f5f5"
                baob[i].style.color = "#666"
            }

        }
        console.log(this.state.item)
    }

    tup1() {
        this.refs.tup1.style.display = "block"
        this.refs.pingj.style.display = "none"
    }
    tup2() {
        this.refs.tup1.style.display = "none"
        this.refs.pingj.style.display = "block"

    }
    shopping() {
        console.log(this.refs.ipts.value)

        let _this = this
        let token = localStorage.getItem('token')
        console.log()
        axios({
            url: 'http://api.cat-shop.penkuoer.com/api/v1/shop_carts',

            method: 'post',
            headers: { 'Accept': 'application/json', 'Authorization': 'Bearer ' + token },
            data: { product: this.props.match.params.pid, quantity: _this.refs.ipts.value }

        }).then(function (data) {
            console.log(data.data)
            if (data.data.code == "success") {
                alert(data.data.message)
            }


        })



    }
}